<template>
    <div class="phone-bg">
        <div class="phone-box1">
            <div class="img-box" :style="{ backgroundImage: `url(${ImageSmurl})` }">
            </div>
            <p v-if="CircleIndex == 0">无边有界，天水交融。向前一步，海阔天空。</p>
            <p v-if="CircleIndex == 1">缥缈月华与无垠大漠再次相遇，柔美与力量共赴美学新生。</p>
            <p v-if="CircleIndex == 2">化木为墨，封存时光，隽永深邃之色在此间写意经典。</p>
            <div class="phone-bottom">
                <div :class="item.class" v-for="item, index in data" :key="item.color1" @click="clickCircle(index)">
                    <div :style="{ border: CircleIndex == index ? `1px solid  ${item.color}` : '' }" style="
                    content: '';
                    width: 38px;
                    height: 38px;
                    transform: translate(-4px, -4px);
                    display: inline-block;
                    margin: 0 16px 8px 16px ;
                    border-radius: 50%;">
                        <div class="circle"></div>
                    </div>
                    <p>{{ item.text }}</p>
                </div>
            </div>
        </div>
        <div class="phone-box2" :style="{ backgroundImage: `url(${Imageurl})` }">
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import phone1 from "/src/assets/img/phone1.png";
import phone2 from "../../assets/img/phone2.jpg";
import phoneOrange from "/src/assets/img/phone-orange.jpeg";
import phoneOrangeSmall from "/src/assets/img/phone-orange-small.png";
import phoneBlack from "/src/assets/img/phone-black.jpeg";
import phoneBlackSmall from "/src/assets/img/phone-black-small.png";



const data = ref([
    { text: '海阔天空', class: 'circle1', color: '#566078', url: phone2, smUrl: phone1 },
    { text: '大漠银月', class: 'circle2', color: '#C78D63', url: phoneOrange, smUrl: phoneOrangeSmall },
    { text: '松影墨韵', class: 'circle3', color: '#575757', url: phoneBlack, smUrl: phoneBlackSmall }])
const CircleIndex = ref(0)
const Imageurl = ref(phone2)
const ImageSmurl = ref(phone1)
const clickCircle = (index) => {
    console.log(index);
    CircleIndex.value = index
    Imageurl.value = data.value[CircleIndex.value].url
    ImageSmurl.value = data.value[CircleIndex.value].smUrl
}
</script>

<style lang="scss" scoped>
.phone-bg {
    padding: 80px 66px;
    background-color: #000;
    display: flex;
    justify-content: space-between;
}

.phone-box1 {
    background-color: #201f1c;
    width: 656px;
    height: 680px;
    padding: 48px 32px;
    box-sizing: border-box;

    .img-box {
        width: 560px;
        height: 360px;
        background-color: #D9D9D9;
        // background-image: url(../../assets/img/);
        background-repeat: no-repeat;
        background-size: 220px;
        background-position: 185px 40px;
        margin-bottom: 40px;
    }

    p {
        color: #fff;
        font-size: 16px;
    }

}

.phone-bottom {
    display: flex;
    cursor: pointer;
    margin-top: 107px;
}

.circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 3px 0 0 3px;
}

.circle1 .circle {
    background-image: linear-gradient(#566078, #353e56);
}

// .circle1 {
//     // .circle::after {
//     //     content: '';
//     //     width: 38px;
//     //     height: 38px;
//     //     transform: translate(-4px, -4px);
//     //     display: inline-block;
//     //     border-radius: 50%;
//     //     // border: 1px solid #566078;
//     // }
// }

.circle2 .circle {
    background-image: linear-gradient(#c0835a, #A26036);
}

.circle3 .circle {
    background-image: linear-gradient(#494949, #111111);
}

.circle2 {
    margin: 0 20px;
}

.phone-box2 {
    // background-color: bisque;
    width: 656px;
    height: 680px;
    // background-image: url('../../../public/img/phone-orange.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
}
</style>